<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- <head>Layui</head> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<div class="layui-layout layui-layout-admin" style="margin-left: 30px;">
			<form class="layui-form" action="">

				<div id="file-detail-content">
					<div id="file-detail-config">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
							<legend>明细内容</legend>
						</fieldset>

						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">明细字段数</label>
								<div class="layui-input-inline">
									<input type="text" name="fileDetailFiledCount" id="file-detail-filed-count"
										readonly="readonly" value="1" lay-verify="fileDetailFiledCount"
										autocomplete="on" class="layui-input">
								</div>
								<label class="layui-form-label">明细数据量</label>
								<div class="layui-input-inline">
									<input type="text" name="fileDetailDataCount" id="file-detail-data-count"
										autocomplete="on" value="1" class="layui-input">
								</div>
							</div>
						</div>
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
							<legend>明细字段内容</legend>
						</fieldset>
						<div class="layui-form-item">
							<label class="layui-form-label">随机数据</label>
							<div class="layui-input-inline">
								<select id="detail-random-data-0" name="detailRandomData-0" lay-filter="detailRandomData">
									<option value="0" selected="">自定义字段内容</option>
									<option value="1">随机UUID</option>
									<option value="2">随机数字</option>
									<option value="3">随机金额</option>
									<option value="4">随机地址</option>
									<option value="5">随机邮箱</option>
									<option value="6">随机日期</option>
									<option value="7">集合数据</option>
									<option value="8">递增行号</option>
									<option value="9">加载数据源</option>
								</select>
							</div>
							<div id="detail-filed-content-0">
								<label class="layui-form-label">自定义内容</label>
								<div class="layui-input-inline">
									<input type="text" name="filedDetailContent-0" autocomplete="on"
										placeholder="多个值可|分隔,随机选取一个" class="layui-input">
								</div>
							</div>

							<div id="detail-add-template-0">

							</div>

							<div class="layui-input-inline">
								<button type="button" class="layui-btn layui-btn-sm" id="detail-field-add">
								  <i class="layui-icon">&#xe654;</i>
								</button>
								
								<button type="button" class="layui-btn layui-btn-sm" id="detail-field-delete">
								  <i class="layui-icon">&#xe640;</i>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div id="file-hidden-content" style="display: none;">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>隐藏内容</legend>
					</fieldset>
					<div class="layui-form-item">
						<label class="layui-form-label">数据Sql</label>
						<div class="layui-input-inline">
							<textarea id="sql" name="sql" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">数据库id</label>
						<div class="layui-input-inline">
							<input type="text" name="dbId" id="dbId" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">集合索引</label>
						<div class="layui-input-inline">
							<input type="text" id="chain-index" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">字段索引id</label>
						<div class="layui-input-inline">
							<input type="text" id="db-column-id" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">数据库字段</label>
						<div class="layui-input-inline">
							<input type="text" id="db-column" class="layui-input">
						</div>
					</div>

				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit="" lay-filter="request">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script src="layui/layui.js" charset="utf-8"></script>
		<script src="layui/jquery-3.6.0.min.js"></script>
		<script>
			layui.config({
				base: 'js/', //静态资源所在路径
			}).extend({
				index: 'http', //主入口模块
			}).use(['form', 'layedit', 'laydate', 'jquery', 'element', 'layer', 'util', 'http'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate,
					element = layui.element,
					api = layui.http.api,
					$ = layui.jquery;
				var detailIndex = 1;

				//明细数据动态增加
				$(document).on("click", "#detail-field-add", function() {
					var detailFiled = '<div class="layui-form-item" id="detail-filed-' + detailIndex + '">' +
						'<label class="layui-form-label">随机数据</label>' +
						'<div class="layui-input-inline">' +
						'<select name="detailRandomData-' + detailIndex +
						'" id="detail-random-data-' + detailIndex +
						'" lay-filter="detailRandomData">' +
						'<option value="0" selected="">自定义字段内容</option>' +
						'<option value="1">随机UUID</option>' +
						'<option value="2">随机数字</option>' +
						'<option value="3">随机金额</option>' +
						'<option value="4">随机地址</option>' +
						'<option value="5">随机邮箱</option>' +
						'<option value="6">随机日期</option>' +
						'<option value="7">集合数据</option>' +
						'<option value="8">递增行号</option>' +
						'<option value="9">加载数据源</option>' +
						'</select>' +
						'</div>' +
						'<div id="detail-filed-content-' + detailIndex + '">' +
						'<label class="layui-form-label">自定义内容</label>' +
						'<div class="layui-input-inline">' +
						'<input type="text" name="filedDetailContent-' + detailIndex +
						'" autocomplete="on" placeholder="多个值可|分隔,随机选取一个"' +
						'class="layui-input">' +
						'</div>' +
						'</div>' +
						'<div id="detail-add-template-' + detailIndex + '"">' +
						'</div>' +
						'</div>';

					$('#file-detail-content').append(detailFiled);
					console.log("增加操作,当前detailIndex值: " + detailIndex)
					console.log("增加detail-filed: " + detailIndex)
					form.render();
					detailIndex++;
					$('#file-detail-filed-count').val(detailIndex);
				});

				//明细数据动态删除
				$(document).on("click", "#detail-field-delete", function() {
					if (detailIndex == 1) {
						return;
					}
					$('#detail-filed-' + (detailIndex - 1) + '').remove();
					console.log("删除操作,当前detailIndex值: " + detailIndex)
					console.log("删除head-filed: " + (detailIndex - 1))
					form.render();
					detailIndex--;
					$('#file-detail-filed-count').val(detailIndex);
				});

				//明细字段动态选择
				form.on('select(detailRandomData)', function(data) {
					let eleid = data.elem.id;
					let id = eleid.split("-")[3];
					$('#detail-add-template-' + id).empty();
					if (data.value == 1 || data.value == 2) {
						$('#detail-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">数据长度</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="detailFiledLength-' + id +
							'" autocomplete="on" placeholder="请输入长度"' +
							'class="layui-input">' +
							'</div>' +
							'<label class="layui-form-label">前后缀使用</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="filedDetailAffix-' + id +
							'" autocomplete="on" placeholder="可为空,left|内容,或right|内容"class="layui-input">' +
							'</div>'

						$('#detail-add-template-' + id).append(div);
					} else if (data.value == 3) { //增加小数小数位选择
						$('#detail-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">整数位</label>' +
							'<div class="layui-input-inline">' +
							'<select name="detailAmount-' + id + '">' +
							'<option value="10">1</option>' +
							'<option value="100">2</option>' +
							'<option value="1000">3</option>' +
							'<option value="10000">4</option>' +
							'<option value="100000">5</option>' +
							'<option value="1000000">6</option>' +
							'<option value="10000000">7</option>' +
							'<option value="100000000">8</option>' +
							'</select>' +
							'</div>' +
							'<label class="layui-form-label">小数位</label>' +
							'<div class="layui-input-inline">' +
							'<select name="detailAmountNumber-' + id + '">' +
							'<option value="0" selected="">0</option>' +
							'<option value="1">1</option>' +
							'<option value="2">2</option>' +
							'<option value="3">3</option>' +
							'<option value="4">4</option>' +
							'<option value="5">5</option>' +
							'<option value="6">6</option>' +
							'<option value="7">7</option>' +
							'<option value="8">8</option>' +
							'</select>' +
							'</div>'

						$('#detail-add-template-' + id).append(div);
					} else if (data.value == 4 || data.value == 5) {
						$('#detail-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">数据长度</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" name="detailFiledLength-' + id +
							'" autocomplete="on" placeholder="请输入长度"' +
							'class="layui-input">' +
							'</div>';
						$('#detail-add-template-' + id).append(div);
					} else if (data.value == 6) { //动态增加日期选择框
						$('#detail-filed-content-' + id).hide();
						let dateformat = '<label class="layui-form-label">日期格式</label>' +
							'<div class="layui-input-inline">' +
							'<select name="detailRandomDate-' + id + '" id="detail-random-date-' + id +
							'" lay-filter="detailRandomDate">' +
							'<option value="yyyy-MM-dd" selected="">yyyy-MM-dd</option>' +
							'<option value="yyyyMMdd">yyyyMMdd</option>' +
							'<option value="yyyy-MM-dd HH:mm:ss">yyyy-MM-dd HH:mm:ss</option>' +
							'<option value="yyyy-MM-dd HH-mm-ss">yyyy-MM-dd HH-mm-ss</option>' +
							'<option value="yyyy-MM-ddHH:mm:ss">yyyy-MM-ddHH:mm:ss</option>' +
							'<option value="yyyy-MM-ddHH-mm-ss">yyyy-MM-ddHH-mm-ss</option>' +
							'<option value="yyyyMMddHHmmss">yyyyMMddHHmmss</option>' +
							'<option value="yyyy/MM/dd HH/mm/ss">yyyy/MM/dd HH/mm/ss</option>' +
							'<option value="yyyy/MM/ddHH/mm/ss">yyyy/MM/ddHH/mm/ss</option>' +
							'</select>' +
							'</div>'
						$('#detail-add-template-' + id).append(dateformat);

						let dateSelect = '<label class="layui-form-label">请选择日期</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" id="detail-filed-date-' + id + '" name="detailFiledDate-' + id +
							'" autocomplete="on" placeholder="例如yyyy-MM-dd"class="layui-input">' +
							'</div>';
						$('#detail-add-template-' + id).append(dateSelect);
					} else if (data.value == 7) {
						$('#detail-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">集合数据项</label>' +
							'<div class="layui-input-inline">' +
							'<input type="text" id="filedChainContent-' + id +
							'" name="filedChainContent-' + id +
							'" autocomplete="on" placeholder="集合配置"class="layui-input">' +
							'</div>';
						$('#detail-add-template-' + id).append(div);
						$('#chain-index').val(id);
						var index = layer.open({
							type: 2, //Page 层类型
							title: '集合子数据配置',
							shade: 0.6, //遮罩透明度
							anim: 0, //0-6的动画形式，-1不开启,
							content: 'detailChain.html',
							maxmin: true //允许全屏最小化
						});
						layer.full(index);

					} else if (data.value == 8) {
						$('#detail-filed-content-' + id).hide();
					} else if (data.value == 9) {
						$('#detail-filed-content-' + id).hide();
						let div = '<label class="layui-form-label">数据库列名</label>' +
							'<div class="layui-input-inline">' +
							'<select id="db-column-select-' + id + '" name="dbColumn-' + id + '">' +

							'</select>' +
							'</div>';
						$('#detail-add-template-' + id).append(div);
						let column = $('#db-column').val();
						if (column == '') {
							$('#db-column-id').val(id);
							let index = layer.open({
								type: 2, //Page 层类型
								title: '数据库字段加载',
								shade: 0.6, //遮罩透明度
								anim: 0, //0-6的动画形式，-1不开启,
								content: 'loadDb.html',
								maxmin: true, //允许全屏最小化
								scrollbar: false,
								btn: '关闭',
								end: function() {
									form.render();
								}
							});
							layer.full(index);
						} else {
							$('#db-column-select-' + id).append(column);
						}
					} else {
						$('#detail-filed-content-' + id).show();
					}
					form.render();
				});


				//明细字段日期格式渲染
				form.on('select(detailRandomDate)', function(data) {
					var eleid = data.elem.id;
					let id = eleid.split("-")[3];
					let val = data.value;
					$('#detail-filed-date-' + id).val("");
					if (val.search('H') != -1) {
						laydate.render({
							format: val,
							elem: '#detail-filed-date-' + id,
							type: 'datetime',
							show: true
						});
					} else {
						laydate.render({
							format: val,
							elem: '#detail-filed-date-' + id,
							type: 'date',
							show: true
						});
					}
					form.render();
				});

				//提交表单
				form.on('submit(request)', function(data) {
					let index = parent.layer.getFrameIndex(window.name); //获取窗口索引
					var result = JSON.stringify(data.field);
					parent.$('#stage-' + index).text(result);
					parent.layer.close(index);
				});

			})
		</script>
	</body>
</html>
